<template>
	<div class="SalesrankHome">
		<!--分页工具条-->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page.sync="currentPage4" :page-sizes="[10,20]" :page-size="pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
		</el-pagination>
		<el-table :data="bookList" style="width: 100%">
			<el-table-column prop="bid" label="书本编号" width="180">
			</el-table-column>
			<el-table-column prop="book_name" label="书本名称" width="180">
			</el-table-column>
			<el-table-column prop="book_sale" label="销售量" width="180">
			</el-table-column>
			<el-table-column prop="book_intro" label="简介">
			</el-table-column>
			<el-table-column prop="book_number" label="浏览量">
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		data() {
			return {
				bookList: [],
				currentRowIndex: '',
				dataonLineListSelections: [],
				// 每页显示的条数
				pageSize: 10,
				// 总记录数
				totalCount: 100,
				// 当前页码
				currentPage: 1,
			}
		},
		created(){
			this.findByPages();
			this.$nextTick(() => { //重新渲染分页
				this.pageshow = true;
			});
		},
		methods: {
			findAll() {
				var _this = this;
				axios.get('http://localhost:8080/book/booktop10')
					.then(res => {
						_this.bookList = res.data; //响应数据给bookList赋值
					})
					.catch(function(error) {
						console.log(error);
					});
			},
			findByPages() {
				var _this = this;
				axios({
					method: "post",
					url: "http://localhost:8080/book/booktopbalance?currentPage=" + this
						.currentPage + "&pageSize=" + this.pageSize,
				}).then(res => {
					//设置表格数据
					_this.bookList = res.data.rows;// {rows:[],totalCount:100}
					//设置总记录数
					this.totalCount = res.data.totalCount;
				})
			},
			//分页
			handleSizeChange(val) {
				//console.log(`每页 ${val} 条`);
				// 重新设置每页显示的条数
				this.pageSize = val;
				this.findByPages();
			},
			handleCurrentChange(val) {
				//console.log(`当前页: ${val}`);
				// 重新设置当前页码
				this.currentPage = val;
				this.findByPages();
			},
		}
	}
</script>

<style>
	.SalesrankHome {
		width: 900px;
		margin-top: 40px;
	}
	
	.SalesrankHome table{
		text-align: center;
		
	}
</style>
